<!-- 站点编辑弹窗 -->
<template>
  <a-modal :width="700" :visible="visible" :confirm-loading="loading" title="导入箱子" :body-style="{ paddingBottom: '8px' }" @update:visible="updateVisible" footer="">
    <a-form ref="form" :model="form" :rules="rules" :label-col="{ md: { span: 6 }, sm: { span: 24 } }" :wrapper-col="{ md: { span: 17 }, sm: { span: 24 } }">
      <a-form-item label="上传文件:" :label-col="{ sm: { span: 3 }, xs: { span: 6 } }" :wrapper-col="{ sm: { span: 21 }, xs: { span: 18 } }">
        <div class="clearfix">
          <a-upload :file-list="fileList" :multiple="false" :before-upload="beforeUpload" :remove="handleRemove">
            <a-button>
              <upload-outlined></upload-outlined>
              请上传需要导入的Excel文件
            </a-button>
          </a-upload>
          <a-button type="primary" :disabled="fileList.length === 0" :loading="uploading" style="margin-top: 16px" @click="handleUpload">
            {{ uploading ? '暂无文件上传' : '确定上传' }}
          </a-button>
        </div>
      </a-form-item>
      <a-table :columns="columns" :data-source="table"> </a-table>
    </a-form>
  </a-modal>
</template>

<script>
import { UploadOutlined } from '@ant-design/icons-vue'

export default {
  name: 'BoxImport',
  components: {
    UploadOutlined
  },
  emits: ['done', 'update:visible'],
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  data() {
    return {
      form: [],
      fileList: [],
      // 提交状态
      loading: false,
      table: [],
      columns: [
        {
          title: '编号',
          dataIndex: 'id'
        },
        {
          title: '箱子编号',
          dataIndex: 'box_code'
        },
        {
          title: '导入时间',
          dataIndex: 'create_time'
        }
      ]
    }
  },
  watch: {},
  methods: {
    // 选择文件
    beforeUpload: function(file) {
      var fileType = file.type
      if (fileType.indexOf('excel') < 0 && fileType.indexOf('sheet') < 0) {
        this.$message.warning('请上传 Excel文件')
        return false
      }
      const isFile = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      if (!isFile) {
        this.$message.error('上传Excel的格式不正确，Xls、Xlsx')
      }
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isLt2M) {
        this.$message.error('文件大小不得超过5M')
      }
      this.fileList = [file]
      return false
    },
    handleUpload: function() {
      const formData = new FormData()
      formData.append('file', this.fileList[0])
      const hide = this.$message.loading('请求中..', 0)
      this.$http
        .post('/depot/box/import', formData)
        .then(res => {
          hide()
          if (res.data.code === 0) {
            this.table = res.data.data
            this.fileList = []
            this.$message.success(res.data.msg)
          } else {
            this.$message.error(res.data.msg)
          }
        })
        .catch(e => {
          hide()
          this.$message.error(e.message)
        })
    },
    // 删除文件
    handleRemove: function(file) {
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
      console.log(123)
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value)
      this.fileList = []
      this.table = []
    }
  }
}
</script>

<style scoped></style>
